import './UserChatItem.scss'
import { useEffect, useRef, useState } from 'react'
import { AIChatAPI } from '@/apis/student';
import { useSelector } from 'react-redux';

export default function UserChatItem({ info }) {
    const { user_status } = useSelector(state => state.user);
    const [AIMsg, setAIMsg] = useState('');
    const markdown = window.markdown;
    const mesRef = useRef(null);

    useEffect(() => {
        async function getAIMsg() {
            const res = await AIChatAPI(info,user_status.token);
            // const res = await localGetAIMessageAPI();
            console.log(res.data.response);
            mesRef.current.innerHTML = markdown.toHTML(res.data.response);
            setAIMsg(res.data.response);
        }

        getAIMsg();
    }, []);


    return (
        <div  className="UserChatItem">
            <div className='user'>
                <div>{info}</div>
            </div>
            <div className='AI'>
                <img src='/static/images/ai-header.svg' alt='11' />
                <div ref={mesRef}></div>
            </div>
        </div>
    )
}